<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">

<head>
    <!-- meta data -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- title of site -->
    <title>注册</title>
    <link rel="shortcut icon" type="image/icon" href="/ka/assets/logo/favicon.ico"/>
    <link rel="stylesheet" href="/ka/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="/ka/assets/css/animate.css">
    <link rel="stylesheet" href="/ka/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ka/assets/css/bootsnav.css">
    <link rel="stylesheet" href="/ka/assets/css/style.css">
    <link rel="stylesheet" href="/ka/assets/css/responsive.css">
</head>

<body>


<!-- signin end -->
<section class="signin signup">
    <div class="container">

        <div class="sign-content" id="app">
            <h2>注 册</h2>

            <div class="signin-form">
                <div class=" ">
                    <div class=" ">
                        <form action="login.html">
                            <div class="form-group">
                                <label>账户</label>
                                <input v-model="registerForm.username" type="text" class="form-control"
                                       placeholder="请输入账户,用于登录">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>昵称</label>
                                <input type="text" v-model="registerForm.nikename" class="form-control"
                                       placeholder="请输入您的昵称">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>姓名</label>
                                <input type="text" v-model="registerForm.name" class="form-control"
                                       placeholder="请输入您的姓名">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>性别</label>
                                <input type="text" v-model="registerForm.gender" class="form-control"
                                       placeholder="请输入您的性别">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>手机号</label>
                                <input type="text" v-model="registerForm.phone" class="form-control"
                                       placeholder="请输入您的手机号">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>邮箱</label>
                                <input type="email" v-model="registerForm.email" class="form-control"
                                       placeholder="请输入您的邮箱">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" v-model="registerForm.password" class="form-control"
                                       placeholder="请输入密码">
                            </div><!--/.form-group -->
                            <div class="form-group">
                                <label>请再次输入密码</label>
                                <input type="password" v-model="registerForm.password1" class="form-control"
                                       placeholder="请再次输入密码">
                            </div><!--/.form-group -->
                        </form><!--/form -->
                    </div><!--/.col -->
                </div><!--/.row -->

            </div><!--/.signin-form -->
            <div class="signin-password">
                <div class="password-circle">
                    <div class="single-password-circle">
                        <input type="radio" id="radio01" name="radio">
                        <label for="radio01">
										<span class="round-boarder">
											<span class="round-boarder1"></span>
										</span>记住密码
                        </label>
                    </div><!--/.single-password-circle-->
                    <div class="single-forgot-password-circle text-right
							">
                        <a href="">忘记密码?</a>
                    </div><!--/.single-password-circle-->
                </div><!--/.password-circle-->
            </div><!--/.signin-password -->

            <div class="signin-footer">
                <div><span style="color: red" v-cloak>{{msg}}</span></div>
                <button type="button" class="btn signin_btn signin_btn_two" data-toggle="modal"
                        @click="regist()">
                    点 击 注 册
                </button>
                <p>
                    已有账号 ?
                    <a href="/ka/toLogin">去登陆</a>
                </p>
            </div><!--/.signin-footer -->

        </div><!--/.sign-content -->

    </div><!--/.container -->

</section><!--/.signin -->

<!-- signin end -->


<!-- Include all js compiled plugins (below), or include individual files as needed -->

<script src="/ka/assets/js/jquery.js"></script>
<script src="/ka/assets/js/bootstrap.min.js"></script>
<script src="/ka/assets/js/bootsnav.js"></script>
<script src="/ka/assets/js/jquery.sticky.js"></script>
<script src="/ka/assets/js/custom.js"></script>
</body>

<!--<script src="/assets/js/vue/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script src="/assets/js/vue/axios.js"></script>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script src="/assets/js/vue/index.js"></script>-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            registerForm: {
                username: "",
                password: "",
                password1: "",
                phone: "",
                email: "",
                nikename: "",
                gender: "",
                name: ""
            },
            msg: ''

        },
        methods: {
            regist() {
                const user = this.registerForm;
                axios.post("/ka/oauth/register", user).then((response) => {
                    if (response.data.flag) {
                        app.msg = "注册成功，即将跳转...";
                        location.href = 'toIndex';
                    } else {
                        app.msg = "注册失败，填写错误或用户名已被使用!";
                    }
                });

            }
        }


    });
</script>

</html>